<template>
  <section>
    <div class="bii-box-section">
      <el-alert style="width: 600px; margin: 13px 0px 8px;" title="每日的对账单会在 次日凌晨 进行更新，每月的对账单会在 次月首日凌晨 进行更新。"
        type="error">
      </el-alert>

      <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="8">
          <div class="tab-nav">
            <div @click="handleType('0')" class="item" :class="{ 'active': (listQuery.type == '0') }">日汇总</div>
            <div @click="handleType('1')" class="item" :class="{ 'active': (listQuery.type == '1') }">月汇总</div>
          </div>
        </el-col>
        <el-col :span="16" style="text-align:right;">
          <common-input @keyup.enter.native="handleFilter" style="width:150px;" placeholder="供应商"
            v-model="listQuery.partnerName" />
          <el-select @change="handleFilter" class="w100 ml10" size="mini" v-model="listQuery.year" placeholder="年份">
            <el-option v-for="item in yearList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select @change="handleFilter" v-if="listQuery.type == '0'" class="w100 ml10" size="mini"
            v-model="listQuery.month" placeholder="月份">
            <el-option value="1">1</el-option>
            <el-option value="2">2</el-option>
            <el-option value="3">3</el-option>
            <el-option value="4">4</el-option>
            <el-option value="5">5</el-option>
            <el-option value="6">6</el-option>
            <el-option value="7">7</el-option>
            <el-option value="8">8</el-option>
            <el-option value="9">9</el-option>
            <el-option value="10">10</el-option>
            <el-option value="11">11</el-option>
            <el-option value="12">12</el-option>
          </el-select>
          <el-button class="ml10" size="mini" @click="exportExcel">导出报表</el-button>
        </el-col>
        <el-col :span="24" style="margin-top:12px;">
          <el-table ref="dataTable" :data="list" style="width: 100%">
            <el-table-column align="left" label="供应商" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.agencyName }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="日期" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="收入（元）">
              <template slot-scope="scope">
                <span><span v-if="scope.row.amount >= 0">+</span>{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="退款（元）">
              <template slot-scope="scope">
                <span><span v-if="scope.row.refundAmount >= 0">+</span>{{ scope.row.refundAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column align="right" label="营收（元）">
              <template slot-scope="scope">
                <span><span v-if="scope.row.finalAmount >= 0">+</span>{{ scope.row.finalAmount }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="listQuery.pageNum" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>
import {
  order_profit_list,
  order_profit_list_export
} from '../../api/partner';
export default {
  components: {
  },
  data() {
    return {
      yearList: [],
      listQuery: {
        type: "0",
        year: undefined,
        month: undefined,
        pageNum: 1,
        pageSize: 20,
        partnerName: undefined,
      },
      list: [],
      total: 0,
    }
  },
  mounted() {
  },
  created() {
    let startYear = 2021;

    var myDate = new Date();
    var endYear = myDate.getFullYear();

    this.yearList = [];
    for (var i = startYear; i <= endYear; i++) {
      this.yearList.push(
        {
          "name": i + "年",
          "id": i
        }
      )
    };

    this.handleFilter();
  },
  methods: {
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    getList() {
      order_profit_list(this.listQuery).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;

      }).catch((err) => {

      })
    },
    handleType(type) {
      this.listQuery.type = type;
      this.handleFilter();
    },
    createCellPos(n) {
      var ordA = 'A'.charCodeAt(0);

      var ordZ = 'Z'.charCodeAt(0);

      var len = ordZ - ordA + 1;

      var s = "";



      while (n >= 0) {

        s = String.fromCharCode(n % len + ordA) + s;

        n = Math.floor(n / len) - 1;

      }

      return s;

    },
    exportExcel() {
      order_profit_list_export(this.listQuery).then((res) => {
        if (res.data.items && res.data.items.length > 0) {
          let items = res.data.items;

          let export_config = res.data.exportConfig;
          items.unshift(export_config.header)

          var column = null;
          eval("column = " + export_config.columnJs);
          console.log(column)
          let export_data = LAY_EXCEL.filterExportData(items, column);
          let sheet_data = new Object();
          eval("sheet_data." + res.data.sheet + "=export_data;");
          let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

          LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
            s: {
              fill: { fgColor: { rgb: "FFFF00" } },
              alignment: {
                horizontal: 'center',
                vertical: 'center'
              },
              font: {
                sz: 12,
                bold: true
              }
            }
          });

          LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
            extend: {
              '!merges': export_config.mergeCells,
              '!cols': export_config.width,
              '!rows': LAY_EXCEL.makeRowConfig({
                1: 40
              })
            }
          });
        } else {
          this.$message.error("导出数据为空");
        }
      }).catch((err) => {
        console.log(err)
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.bii-box-section {
  // padding: 80px;
  // height: 100%;
  // background: #fff;
  // -webkit-box-sizing: border-box;
  // box-sizing: border-box;
  // overflow: auto;
}
</style>
